﻿<MCard Id="create">
    <MContainer fluid>
        <MRow Class="child-flex">
            <MCol Cols="12"
                  Sm="6"
                  Md="4">
                <MSubheader>Options</MSubheader>
                <MCheckbox @bind-Value="hover"
                           Label="Open on hover"
                           HideDetails="true"></MCheckbox>
            </MCol>
            <MCol Cols="12"
                  Sm="6"
                  Md="4">
                <MSubheader>FAB location</MSubheader>
                <MCheckbox @bind-Value="Top"
                           Label="Top"
                           HideDetails="true"></MCheckbox>
                <MCheckbox @bind-Value="Right"
                           Label="Right"
                           HideDetails="true"></MCheckbox>
                <MCheckbox @bind-Value="Bottom"
                           Label="Bottom"
                           HideDetails="true"></MCheckbox>
                <MCheckbox @bind-Value="Left"
                           Label="Left"
                           HideDetails="true"></MCheckbox>
            </MCol>
            <MCol Cols="12"
                  Sm="6"
                  Md="4">
                <MSubheader>Speed dial direction</MSubheader>
                <MRadioGroup @bind-Value="direction"
                             HideDetails="true">
                    <MRadio Value="@("top")"
                            Label="Top"></MRadio>
                    <MRadio Value="@("right")"
                            Label="Right"></MRadio>
                    <MRadio Value="@("bottom")"
                            Label="Bottom"></MRadio>
                    <MRadio Value="@("left")"
                            Label="Left"></MRadio>
                </MRadioGroup>
            </MCol>
            <MCol Cols="12"
                  Sm="6"
                  Md="4">
                <MSubheader>Transition</MSubheader>
                <MRadioGroup @bind-Value="@transition"
                             HideDetails="true">
                    <MRadio Value="@("slide-y-transition")"
                            Label="Slide y"></MRadio>
                    <MRadio Value="@("slide-y-reverse-transition")"
                            Label="Slide y reverse"></MRadio>
                    <MRadio Value="@("slide-x-transition")"
                            Label="Slide x"></MRadio>
                    <MRadio Value="@("slide-x-reverse-transition")"
                            Label="Slide x reverse"></MRadio>
                    <MRadio Value="@("scale-transition")"
                            Label="Scale"></MRadio>
                </MRadioGroup>
            </MCol>
        </MRow>
    </MContainer>
    <MSpeedDial @bind-Value="fab"
                Top="top"
                Bottom="bottom"
                Right="right"
                Left="left"
                Direction="@direction"
                OpenOnHover="hover"
                Style="position: absolute;"
                Transition="@transition">
        <ActivatorContent>
            <MButton Color="blue darken-2" Fab @attributes="@context.Attrs">
                <MIcon>
                    @ComputeIcon()
                </MIcon>
            </MButton>
        </ActivatorContent>
        <ChildContent>
            <MButton Color="green" Fab Small>
                <MIcon>
                    mdi-pencil
                </MIcon>
            </MButton>
            <MButton Color="indigo" Fab Small>
                <MIcon>
                    mdi-plus
                </MIcon>
            </MButton>
            <MButton Color="red" Fab Small>
                <MIcon>
                    mdi-delete
                </MIcon>
            </MButton>
        </ChildContent>
    </MSpeedDial>
</MCard>

@code {
    private bool hover;

    private bool top;

    public bool Top
    {
        get
        {
            return top;
        }
        set
        {
            top = value;
            bottom = !top;
            StateHasChanged();
        }
    }

    private bool right = true;

    public bool Right
    {
        get
        {
            return right;
        }
        set
        {
            right = value;
            left = !right;
            StateHasChanged();
        }
    }

    private bool bottom = true;

    public bool Bottom
    {
        get
        {
            return bottom;
        }

        set
        {
            bottom = value;
            top = !bottom;
            StateHasChanged();
        }
    }

    private bool left;

    public bool Left
    {
        get
        {
            return left;
        }
        set
        {
            left = value;
            right = !left;
            StateHasChanged();
        }
    }

    private string direction = "top";

    private string transition = "slide-y-reverse-transition";

    private bool fab;

    public string ComputeIcon()
    {
        return fab ? "mdi-close" : " mdi-account-circle";
    }
}
